<template>
  <div class="container">
    <el-card>
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        v-if="this.$route.query.name"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        <el-divider></el-divider>
      </el-breadcrumb>

      <div class="self-left">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline left"
        >
          <el-form-item label="关键字">
            <el-input v-model="formInline.tagName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="禁用" value="0"></el-option>
              <el-option label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="cancel">清除</el-button>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="self-right">
        <el-button @click="backFn" v-if="isShow" style="color: #66b1ff">
          <i class="el-icon-back"> </i>
          返回学科
        </el-button>

        <el-button type="success" icon="el-icon-edit" @click="newlyIncreased"
          >新增技巧</el-button
        >
      </div>
      <el-alert
        type="info"
        class="alert"
        :closable="false"
        show-icon
        :title="'数据一共' + all + '条'"
      ></el-alert>
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column width="200" label="所属学科" property="subjectName">
        </el-table-column>
        <el-table-column property="tagName" label="标签名称" width="150">
        </el-table-column>

        <el-table-column property="username" label="创建者" width="180">
        </el-table-column>
        <el-table-column property="addDate" label="创建时间">
          <!-- 格式化时间 -->
          <template slot-scope="scope">
            {{ _timeTimeOfEntry(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column property="state" label="状态">
          <!-- 格式化状态 -->
          <template slot-scope="scope">
            {{ _hireformOfEmployment(scope.row.state) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- 插槽 -->
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="DisableTheButton(scope.row)"
              >{{ scope.row.state == 1 ? "禁用" : "启用" }}</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 0"
              @click="modificationSubject(scope.row.id, scope.row.subjectID,scope.row.tagName)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 0"
              @click="delData(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
        class="boxxx"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="all"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 带id 的弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="OnecenterDialogVisible"
      width="500px"
      center
    >
      <el-form
        :model="OneruleForm"
        :rules="rules"
        ref="OneruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="OneruleForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OnecenterDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="OneAdd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 不带id的弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="TwocenterDialogVisible"
      width="400px"
      center
    >
      <el-form
        :model="TworuleForm"
        :rules="rules"
        ref="TworuleForm"
        label-width="125px"
        class="demo-ruleForm"
      >
        <el-form-item label="所属学科" prop="subject">
          <el-select v-model="TworuleForm.subjectID" placeholder="活动区域">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in list"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称" prop="tagName">
          <el-input v-model="TworuleForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="twoAdd">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 带id 的修改 -->
    <el-dialog
      title="提示"
      :visible.sync="modificationDialogID"
      width="400px"
      center
    >
      <el-form
        :model="modificationID"
        :rules="rules"
        ref="modificationID"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科名称" prop="tagName">
          <el-input v-model="modificationID.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modificationDialogID = false">取 消</el-button>
        <el-button type="primary" @click="modificationYesID">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 不带id 的修改 -->
    <el-dialog
      title="提示"
      :visible.sync="modificationDialog"
      width="400px"
      center
    >
      <el-form
        :model="modification"
        :rules="rules"
        ref="modification"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="所属学科" prop="subject">
          <el-select v-model="modification.subjectID" placeholder="活动区域">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in subject"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="modification.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiaos">取 消</el-button>
        <el-button type="primary" @click="modificationNoID">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  lists,
  changeState,
  queryCondition,
  delDataAPI,
  addArticle,
  modModification,
  listto
} from '@/api/tagsAPI'
import formatDate from 'dayjs'
import EmployeeEnum from '@/api/base/baseApi'
export default {
  data () {
    return {
      // 查询
      formInline: {
        tagName: '',
        state: null
      },
      // 一共多少数据
      all: 0,
      // 全部数据
      tableData: [],
      list: [],
      // 页数
      page: 1,
      // 每页条数
      pagesize: 10,

      OnecenterDialogVisible: false,
      TwocenterDialogVisible: false,
      modificationDialogID: false,
      modificationDialog: false,
      OneruleForm: {
        tagName: '',
        subjectID: Number(this.$route.query.id),
        id: null
      },
      TworuleForm: {
        tagName: '',
        subjectID: '',
        id: null
      },
      modificationID: {
        id: null,
        tagName: '',
        subjectID: ''
      },
      modification: {
        id: null,
        tagName: '',
        subjectID: ''
      },
      rules: {
        tagName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      isShow: false,
      subject: []
    }
  },
  created () {
    this.hlistto()
    if (this.$route.query.id) {
      this.hlists()
      this.isShow = true
    } else {
      this.hlist()
      this.isShow = false
    }
  },
  methods: {
    // 获取数据
    async  hlistto () {
      const res = await listto()
      console.log('555555', res)
      this.list = res.data
      console.log('66666', this.list)
    },
    quxiaos () {
      this.modificationDialog = false
      this.modification = {}
    },
    // 获取列表数据
    async hlist () {
      const res = await list({
        page: this.page,
        pagesize: this.pagesize,
        tagName: this.formInline.tagName
      })
      this.tableData = res.data.items
      this.all = res.data.counts
      console.log('list', res)
    },
    async hlists () {
      const res = await lists({
        subjectID: Number(this.$route.query.id),
        page: this.page,
        pagesize: this.pagesize,
        tagName: this.formInline.tagName
      })
      this.tableData = res.data.items
      this.all = res.data.counts
      console.log('hlists', res)
    },
    // 清空文字
    // 点击清除 清除数据，从新获取列表
    cancel () {
      this.formInline = {}
      this.hlist()
    },
    // 取消
    quxiao () {
      this.TwocenterDialogVisible = false
      this.TworuleForm = {}
    },
    // 新增
    newlyIncreased () {
      this.TworuleForm = {}
      this.modification = {}
      if (this.$route.query.id) {
        this.hlistto()
        this.OnecenterDialogVisible = true
      } else {
        this.hlistto()
        this.TwocenterDialogVisible = true
      }
    },
    // 添加不带id 的文章
    async twoAdd () {
      this.modification = {}
      this.$refs.TworuleForm.validate(async (value) => {
        if (value) {
          console.log('this.TworuleForm.subjectID', this.TworuleForm.subjectID)
          await addArticle(this.TworuleForm)
          this.$message.success('添加成功')
          this.TwocenterDialogVisible = false
          this.hlist()
        } else {
          return false
        }
      })
    },
    // 添加带id的文章
    async OneAdd () {
      this.$refs.OneruleForm.validate(async (value) => {
        if (value) {
          await addArticle(this.OneruleForm)
          this.$message.success('添加成功')
          this.OnecenterDialogVisible = false
          console.log(12121212)
          this.hlists()
          console.log(' this.hlists()', this.hlists())
        } else {
          return false
        }
      })
    },
    // 修改不带id的表格
    async modificationNoID () {
      this.$refs.modification.validate(async (value) => {
        if (value) {
          const res = await modModification(this.modification)
          if (res.data.success) {
            this.$message.success('修改成功')
            this.modification = {}
            this.hlist()
            this.modificationDialog = false
          }
        } else {
          return false
        }
        this.modification = {}
      })
    },
    // 修改带id的
    async modificationYesID () {
      this.$refs.modificationID.validate(async (value) => {
        if (value) {
          const res = await modModification(this.modificationID)
          if (res.data.success) {
            this.$message.success('修改成功')
            this.modificationID = {}
            this.hlists()
            this.modificationDialogID = false
          } else {
            return false
          }
        }
      })
    },
    // 格式化时间
    _timeTimeOfEntry (val) {
      formatDate(val).format('YYYY-MM-DD HH:mm:ss')
      return formatDate(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 更改状态
    _hireformOfEmployment (val) {
      console.log(val)
      console.log(val)
      const map = {}
      EmployeeEnum.state.forEach((item) => {
        map[item.id] = item.value
      })
      console.log('状态', val)
      return map[val]
    },
    handleCurrentChange (val) {
      console.log('这个是啥 换页', val)
      if (this.$route.query.id) {
        this.page = val
        this.hlists()
        console.log(this.hlists())
      } else {
        this.page = val
        this.hlist()
      }

      this.hlist()
    },
    handleSizeChange (val) {
      // console.log(val)
      if (this.$route.query.id) {
        this.pagesize = val
        this.hlists()
      } else {
        this.pagesize = val
        this.hlist()
      }
    },
    // 修改学科
    async  modificationSubject (val, subjectID, tagName) {
      const res = await listto()
      this.subject = res.data
      // async function aa () {
      //   const res = await listto()
      //   console.log('this', res)
      //   res.data.forEach(item => {
      //     if (subjectID === item.value) {
      //       return item.lable
      //     }
      //   })
      // }
      // const bb = aa()
      // console.log('bb', aa())

      this.modification.id = val
      this.modificationID.id = val
      this.modificationID.tagName = tagName
      this.modification.tagName = tagName
      this.modification.subjectID = subjectID
      this.modificationID.subjectID = subjectID
      if (this.$route.query.id) {
        this.modificationDialogID = true
      } else {
        this.modificationDialog = true
      }
    },
    backFn () {
      this.$router.push('list')
    },
    async DisableTheButton (val) {
      const states = val.state === 0 ? 1 : 0
      const res = await changeState({
        id: val.id,
        state: states
      })
      if (res.data.success) {
        this.$message.success('更新成功')
        if (this.$route.query.id) {
          this.hlists()
        } else {
          this.hlist()
        }
      }
    },
    // 点击按钮进行查询
    async onSubmit () {
      const res = await queryCondition({
        tagName: this.formInline.tagName,
        state: this.formInline.state,
        page: this.page,
        pagesize: this.pagesize
      })
      console.log('查询', res)
      this.tableData = res.data.items
      this.all = res.data.counts
    },
    // 删除数据
    delData (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delDataAPI({ id: id })
          this.hlist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  // 监听路由参数的变化'$route.query'
  // 变化了就执行
  watch: {
    '$route.query': function () {
      if (this.$route.query.id) {
        this.hlists()
        this.isShow = true
      } else {
        this.hlist()
        this.isShow = false
      }
    }
  }
}
</script>

<style scoped lang='less'>
.boxxx{
  text-align: right;
}
.self-right{
  float: right;

}
.self-left{
  float: left;
}
</style>

<style scoped lang='scss'>
//  ::v-deep .el-input__inner{
//   // display: inline-block;
//   width: 280px;
// }
::v-deep .el-dialog__footer {
  text-align: center;
}
::v-deep .el-dialog__body {
  width: 400px;
}
// ::v-deep .el-input{
//   display: inline-block;
//   width: 217px;

// }
// ::v-deep .el-input--medium {
//   width: 217px;

// }
</style>
